<template>
  <div class="container">
    <div class="top">
      <el-card>

        <div class="op">
          <!-- <el-button type="success" @click="search()" plain>漏洞扫描</el-button> -->
          <el-button type="success" @click="handleExport()" plain>漏洞导出</el-button>
        </div>
      </el-card>
    </div>
    <div class="middle">
      <el-table ref="multipleTable" :data="tableData" stripe tooltip-effect="dark" style="width: 100%">
        <!-- <el-table-column type="selection" width="55"></el-table-column> -->
        <el-table-column label="漏洞名称" prop="bugName"></el-table-column>
        <el-table-column label="数据库类型" prop="dbType"></el-table-column>
        <el-table-column label="漏洞级别" prop="level"></el-table-column>
        <el-table-column label="整改措施" prop="measure"></el-table-column>
        <!-- <el-table-column label="扫描时间" prop="time"></el-table-column> -->
      </el-table>
    </div>
    <el-dialog
      title="漏洞扫描结果"
      :visible.sync="dialogVisible"
      width="30%">
      <span>{{ checkMsg }}</span>
      <span slot="footer" class="dialog-footer">
                <el-button @click="checkResult()">取 消</el-button>
                <el-button type="primary" @click="checkResult()">确 定</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
  window._interceptConfig = {
    collection: true, //整体开关
    click: true, //页面点击事件信息采集开关
    page: true, //页面跳转加载事件信息采集开关
    error: true, //异常信息采集开关
    http: true, //通讯信息采集开关
    name: "jyzdhywxxxtsdfx_n_prd.mart-ui-ds", //系统编号，被采集信息的系统名称。前端简称
    url: " http://apm.sd.sgcc.com.cn:19411/api/v2/spansWeb"//数据上报服务地址，根据实际情况输入
  };
</script>
<!-- src -->
<script src=" http://25.41.37.249:19411/assets/js/intercept.min.js " async></script>
<script>
  import { queryHole, searchHole } from "@/api/system/devops"
  export default {
    name: 'Loopholecheck',
    data() {
      return {
        // 表格数据
        tableData: null,
        // 扫描结果
        checkMsg: '',
        // 扫描结果提示框
        dialogVisible: false,
      }
    },
    methods: {
      handleExport() {
        this.download('devopscontroller/exportHole', {
          ...this.queryParams
        }, `File_${new Date().getTime()}.xlsx`)
      },
      // 加载数据
      initData() {
        queryHole().then(response => {
          this.tableData = response.data
        })
      },
      // 漏洞扫描
      search() {
        this.$confirm('要开始漏洞扫描吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 开启遮罩
          const loading = this.$loading({
            lock: true,
            text: '漏洞扫描中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          searchHole().then(response => {
            this.checkMsg = response.data.msg
            loading.close()
            this.dialogVisible = true
          })
        })
      },
      // 扫描结果确认
      checkResult() {
        this.dialogVisible = false
        this.initData()
      }
    },
    mounted() {
      this.initData()
    },
  }

</script>

<style>
  .container {
    display: flex;
    flex-direction: column;
  }
  .middle {
    margin: 10px;
    width: 100%;
  }
</style>
